import React from 'react'
import injectSheet from 'react-jss'
import styles from './styles'
import https from '@/assets/https'
import { Layout, Button, } from 'antd'

const { Content } = Layout

class TopicDetail extends React.Component {
  state = {
    topic: {
      title: '',
      content: '',
      type: {},
    },
  }

  componentWillMount() {
    const { id } = this.props.match.params
    https(`/topic/${id}`, {}).then(result => {
      this.setState({
        topic: result.data
      })
    })
  }

  render() {
    const { classes } = this.props
    const { topic } = this.state
    return (
      <Layout>
        <Content className={classes.Content}>
          <article className={classes.Topic}>
            <div className={classes.TopicCard}>
              <h1 className={classes.TopicTitle}>{topic.title}</h1>
              <div className={classes.TopicContent}>
                {topic.content}
              </div>
              <div className={classes.TopicFooter}>
                <ul className={classes.LabelList}>
                  <li className={`${classes.Label} Label-${topic.type.typeId}`}>
                    {topic.type.value}
                  </li>
                  <li>
                    <Button href="/topic">返回</Button>
                  </li>
                </ul>
              </div>
            </div>
          </article>
        </Content>
      </Layout>
    )
  }
}

export default injectSheet(styles)(TopicDetail)
